<template>
	<view class="page">
		<view class="pageBg">
			<image src="https://bjsx.gzwhir.com/admin-api/infra/file/18/get/memberbg2.png" mode="aspectFill"></image>
		</view>
		<view class="flex0">
			<u-navbar :fixed='false' bgColor="transparent" @leftClick="navBack"  title="危机干预">
				<view slot="center" class="navTitle">
					危机干预 
				</view>
			</u-navbar>
			<view class="pd30">
				<view class="filterBlock">
					<view class="block">
						<view class="tbs">
							<view class="i" :class="type==0?'cur':''" @tap="toggleType(0)">
								<view class="it">
									未完成
								</view>
								<view class="ic">
									<image src="@/static/images/icon-halfcircle.svg" mode="aspectFit"></image>
								</view>
							</view>
							<view class="i" :class="type==1?'cur':''" @tap="toggleType(1)">
								<view class="it">
									已完成
								</view>
								<view class="ic">
									<image src="@/static/images/icon-halfcircle.svg" mode="aspectFit"></image>
								</view>
							</view>
						</view>
					</view>
					<view class="block">
						<view class="search">
							<view class="ico">
								<image src="@/static/images/icon-search.png" mode="aspectFit"></image>
							</view>
							<input type="text" v-model="keyword" placeholder="搜索姓名" confirm-type="search" @confirm="search" />
						</view>
						<view class="select">
							<uni-data-select
							  v-model="selectedGrade"
							  :localdata="gradeOptions"
							  :clear="false"
							  placeholder="所属班级"
							  @change="search"
							></uni-data-select>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="flex1">
			<scroll-view scroll-y="true"  @scroll="updateScroll" :scroll-top="scrollTop" class="scrollView pt30" @scrolltolower="loadMore">
				<view class="pd30">
					<view class="warningList">
						<view class="item" v-for="(i,index) in list" :key="index">
							<view class="l">
								<view class="name">
									{{i.studentName}}
								</view>
								<view class="gd">
									{{i.studentGradeName}}{{i.studentClassesName}}
								</view>
							</view>
							<view class="c">
								<view class="stage" :style="'color:'+stageOption(i.level).color+';background:'+stageOption(i.level).bgColor+';'">
									{{stageOption(i.level).label}}
								</view>
							</view>
							<view class="r" v-if="i.status==1">
								<view class="btn" @tap="openForm(i.id)">
									<view class="ico">
										<image src="@/static/images/icon-heart.svg" mode="aspectFit"></image>
									</view>
									<view class="p">
										干预
									</view>
								</view>
								<view class="tol" @tap="openSheetAction(0,i)">
									<image src="@/static/images/icon-dots.svg" mode="aspectFit"></image>
								</view>
							</view>
							<view class="r" v-else>
								<view class="btn" @tap="viewDetail(i.id)">
									<view class="ico">
										<image src="@/static/images/icon-eye.png" mode="aspectFit"></image>
									</view>
									<view class="p">
										查看
									</view>
								</view>
								<view class="tol" @tap="openSheetAction(0,i)">
									<image src="@/static/images/icon-dots.svg" mode="aspectFit"></image>
								</view>
							</view>
						</view>
					</view>
					<u-loadmore fontSize="24rpx" :status="list.length<total?(isLoading?'loading':'loadmore'):'nomore'" />
				</view>
			</scroll-view>
			<u-toast ref="uToast"></u-toast>
			<u-popup :show="show" @close="show=false" mode="center" :customStyle="{width:'100%',padding:'30rpx',boxSizing:'border-box',background:'none'}">
				<view class="taskPop">
					<view class="tit">
						修改危机等级
					</view>
					<view class="ls">
						<view class="li">
							<view class="select">
								<uni-data-select
								  v-model="changeForm.newStage"
								  :localdata="stageArr"
								  :clear="false"
								  placeholder="下拉选择（单选）"
								></uni-data-select>
							</view>
						</view>
					</view>
					<view class="ft">
						<view class="btn on" @tap="checkChageGrade">
							确认
						</view>
						<view class="btn" @tap="show=false">
							取消
						</view>
					</view>
				</view>
			</u-popup>
		</view>
		<u-action-sheet @close="showActionSheet=false" :closeOnClickOverlay="true" round="30rpx" :actions="actions[actionSheetIndex]" @select="handleAction" :show="showActionSheet"></u-action-sheet>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				actions:[
					[]
				],
				
				actAll:[
						{
							name:'无需干预',
							action:'noIntervention'
						},
						// {
						// 	name:'编辑干预措施',
						// 	action:'openForm'
						// },
						{
							name:'查看干预详情',
							action:'viewDetail'
						},
						{
							name:'修改危机等级',
							action:'openChageGrade'
						},
						{
							name:'历史干预记录',
							action:'viewHistory'
						},
						{
							name:'取消',
							action:'closeSheetAction'
						}
					],
				showActionSheet:false,
				show:false,
				actionSheetIndex:0,
				actionObj:{},//当前更多操作的对象
				oldScrollTop:0,
				scrollTop:0,
				gradeOptions:[],
				changeForm:{
					id:"",
					newStage:''
				},
				crisisLevel:[],
				type:0,
				list:[],
				keyword:'',
				selectedGrade:'',
				pageSize:15,
				total:1,
				pageIndex:1,
				isLoading:false
			}
		},
		methods: {
			handleAction(e){//操作菜单点击
				var that=this;
				const id=that.actionObj.id;
				switch (e.action){
					case 'noIntervention':{
						that.noIntervention(id);
						break;
					};
					case 'openForm':{
						that.openForm(id);
						break;
					};
					case 'viewDetail':{
						that.viewDetail(id);
						break;
					};
					case 'openChageGrade':{
						that.openChageGrade(id);
						break;
					};
					case 'viewHistory':{
						that.viewHistory(id);
						break;
					};
					case 'closeSheetAction':{
						that.closeSheetAction();
						break;
					};
				}
				that.closeSheetAction();
			},
			noIntervention(id){//无需干预
				
				this.$api.interveneUpdateEnded({id}, res => {
					if (res.code == 200) {
						this.search()
						this.$common.errorToShow('操作成功')
					}else{
						this.$common.errorToShow(res.message)
					}
				})
			},
			openForm(id){//打开表单
				uni.navigateTo({
					url:'/subpage/teacher/intervene/form?id='+id
				})
			},
			viewDetail(id){//打开详情
				uni.navigateTo({
					url:'/subpage/teacher/intervene/detail?id='+id
				});
			},
			openChageGrade(id){//打开修改危机等级弹窗
				var that=this;
				that.changeForm.id=id;
				that.show=true;
			},
			checkChageGrade(){//确认修改危机等级
				let post={
					id:this.changeForm.id,
					level:this.changeForm.newStage,
				}
				this.$api.updateLevel(post, res => {
					if (res.code == 200) {
						
						this.$common.errorToShow('修改成功')
						this.search()
						this.show=false;
					}else{
						
							this.$common.errorToShow(res.message)
					}
				})
				
			},
			viewHistory(id){//查看历史记录
				uni.navigateTo({
					url:'/subpage/teacher/intervene/history?id='+id
				})
			},
			openSheetAction(index,obj){//打开更多操作
				var that=this;
				that.actionSheetIndex=index;
				that.actions[0]=JSON.parse(JSON.stringify(that.actAll))
				that.actionObj=obj;
				if(obj.level==3){
					that.actions[0].splice(0,1)
				}
				that.showActionSheet=true;
			},
			closeSheetAction(){//关闭更多操作
				var that=this;
				that.showActionSheet=false;
				that.actionSheetIndex=0;
				that.actionObj={};
			},
			getGradeOptions(){
				
				
				this.$api.classesList({gradeId:''}, res => {
					if (res.code == 200) {
						res.data.some(item=>{
							item.text=item.gradeName+item.classesName
							item.value=item.id
						})
						this.gradeOptions=res.data;
					}
				})
			},
			updateScroll(e){
				this.oldScrollTop=e.detail.scrollTop;
			},
			search(){
				var that=this;
				that.list=[];
				that.pageIndex=1;
				that.scrollTop=that.oldScrollTop;
				that.$nextTick(function() {
					that.scrollTop = 0
				});
				that.getList();
			},
			toggleType(type){
				var that=this;
				that.type=type;
				that.list=[];
				that.pageIndex=1;
				that.scrollTop=that.oldScrollTop;
				that.$nextTick(function() {
					that.scrollTop = 0
				});
				that.getList();
			},
			getList(){
				
				
				if (this.isLoading) {
					return;
				};
				this.isLoading = true;
					let post = {
						pageNo: this.pageIndex,
						methodType:'get',
						status:'',
						name:this.keyword,
						classesId:this.selectedGrade,
						pageSize: 20
					}
					if(this.type==1){
						post.status=3
					}
					this.$api.crisisList(post, res => {
						if (res.code == 200) {
							this.total=res.data.total;
							let _list = res.data.list
							this.list = [...this.list, ..._list]
							// 判断所有数据是否请求完毕
							this.isLoading =false;
						}
					})
			},
			loadMore(){
				var that=this;
				if(that.list.length<that.total&&!that.isLoading){
					that.pageIndex++;
					that.getList();
				}
			}
		},
		computed:{
			
		},
		onShow(){
			this.getGradeOptions();
			this.search();
			
			
				this.$api.dictList({
					dictType: 'crisis_level'
				}, res => {
					if (res.code == 200) {
						this.crisisLevel=res.data
					}
				})
		}
	}
</script>

<style lang="scss" scoped>
	.taskPop{
		background: #fff;
		padding: 40rpx 38rpx 10rpx;
		border-radius: 30rpx;
		color: #65554d;
		.tit{
			text-align: center;
			font-size: 40rpx;
			padding-bottom: 40rpx;
		}
		.tit2{
			padding-bottom: 24rpx;
			font-size: 28rpx;
		}
		.ls{
			padding-bottom: 20rpx;
			.li{
				border-radius: 20rpx;
				background:#f9f8f6;
				/deep/.uni-select{
					border: none;
					height: 90rpx;
					padding: 0 30rpx;
					.uni-select__input-text{
						font-size: 28rpx;
					}
				}
			}
		}
		.ft{
			display: flex;
			align-items: stretch;
			justify-content: space-between;
			.btn{
				flex: 0 0 auto;
				width: 50%;
				font-size: 28rpx;
				color: #65554d;
				line-height: 100rpx;
				text-align: center;
				&.on{
					color: #fe9c29;
				}
			}
		}
	}
	.filterBlock{
		.block{
			.search{
				background: #fff;
				border-color: #fff;
			}
		}
		.select{
			/deep/ .uni-select{
				background: #fff !important;
				border-color: #fff !important;
			}
		}
	}
	.warningList{
		.item{
			display: flex;
			justify-content: space-between;
			align-items: center;
			height: 100rpx;
			padding: 0 30rpx;
			background: #fff;
			margin-bottom: 20rpx;
			border-radius: 30rpx;
			.l{
				flex: 1 1 auto;
				overflow: hidden;
				display: flex;
				align-items: center;
				justify-content: flex-start;
				.name{
					font-size: 28rpx;
					flex: 0 0 auto;
					min-width: 4em;
					padding-right: 1em;
					color: #65554d;
				}
				.gd{
					flex: 0 0 auto;
					font-size: 24rpx;
					color: #b6aeab;
				}
			}
			.c{
				padding-right: 40rpx;
				flex: 0 0 auto;
				.stage{
					font-size: 24rpx;
					width: 80rpx;
					text-align: center;
					line-height: 40rpx;
					border-radius: 6rpx;
				}
			}
			.r{
				display: flex;
				flex: 0 0 auto;
				align-items: center;
				.btn{
					display: flex;
					flex: 0 0 auto;
					width: 120rpx;
					height: 60rpx;
					justify-content: center;
					align-items: center;
					border-radius: 60rpx;
					color: #fe9c29;
					font-size: 24rpx;
					background: #ffefde;
					.ico{
						flex: 0 0 auto;
						margin-right: 5rpx;
						image{
							display: block;
							width: 28rpx;
							height: 26rpx;
						}
					}
				}
				.tol{
					flex: 0 0 auto;
					margin-left: 20rpx;
					padding-left: 20rpx;
					display: flex;
					align-items: center;
					height: 60rpx;
					image{
						display: block;
						width: 26rpx;
						height: 6rpx;
					}
				}
			}
		}
	}
</style>
